    // 固定定位 人工和 top
    
    var gudingtop = document.getElementById('gudingtop');

    var guding = document.getElementById('guding')
    guding.onmouseover = function () {
        guding.style.backgroundPosition = '-56px -46px'
    }
    guding.onmouseout = function () {
        guding.style.backgroundPosition = '0 -46px'
    }
    if (document.documentElement.scrollTop > 290) {
        gudingtop.style.display = 'block'
        guding.style.bottom = '60px'
        
    } else {
        gudingtop.style.display = 'none'
        guding.style.bottom = '20px'
    }
    window.onscroll = function () {
        if (document.documentElement.scrollTop > 290) {
            gudingtop.style.display = 'block'
            guding.style.bottom = '60px'
            
        } else {
            gudingtop.style.display = 'none'
            guding.style.bottom = '20px'
        }
}
// 慢慢上去
gudingtop.onclick = function(e){
    e.preventDefault();

    let a = document.documentElement.scrollTop;
    let b = 0;
    let s = b - a;
    let sudu = parseInt(s / 600 * 17);
    var timer =null
    timer= setInterval(function () {
            a += sudu;
            if (a < b) {
                clearInterval(timer);
            }
        document.documentElement.scrollTop = a
    },17)
}


var fenlei = document.getElementsByClassName('fenlei');
var nav_none = document.getElementsByClassName('nav-none');
var shuigt = document.getElementsByClassName('shuigt');
var navtitle = document.getElementById('nav-title')
var xianshi = document.getElementsByClassName('xianshi')[0];



// 商品分类 显示隐藏
xianshi.style.display = 'none'

navtitle.onmouseover = function () {
    xianshi.style.display = 'block'
}
navtitle.onmouseout = function () {
    xianshi.style.display = 'none'
}
xianshi.onmouseover = function () {
    xianshi.style.display = 'block'
}
xianshi.onmouseout = function () {
    xianshi.style.display = 'none'
}

// 全部商品分类 显示隐藏
nav_none[0].style.display = 'none'

for (let i = 0; i < fenlei.length; i++) {
    shuigt[i].style.backgroundPosition = -i * 24 + 'px' + ' 0px'
    if (i === 0)
    {
        fenlei[i].style.top = '36px'
        
    } else {
        fenlei[i].style.top = i*43+36+'px'    
    }

    // 注册水果事件
    fenlei[i].onmouseover = function (e) {
        this.display = 'block'
        fenlei[i].classList.add('mafan')
        for (let j = 0; j < nav_none.length; j++) {
            nav_none[j].style.display = 'none'
        }
        nav_none[i].style.display = 'block'
    }
    fenlei[i].onmouseout = function () {
        nav_none[i].style.display = 'none'
        fenlei[i].classList.remove('mafan')
        return

    }
    nav_none[i].onmouseover = function () {
        this.style.display = 'block'
        fenlei[i].classList.add('mafan')

    }
    nav_none[i].onmouseout = function () {
        this.style.display = 'none'
        fenlei[i].classList.remove('mafan')
        return
    }
}






    // 固定定位
    var zqu = document.getElementsByClassName('shangpin')[0];
    var louceng = document.getElementsByClassName('dangji');
    var noli = document.getElementsByClassName('noli');
    var lou_title = document.getElementsByClassName('lou_title');
    var dingwei = document.getElementById('dingwei');
    
   
    
    
var arr = ['当季精选', '缤纷鲜果', '肉品禽蛋', '海鲜水产', '清新鲜蔬', '食品饮料']
    for (let i = 0; i < lou_title.length; i++) {
        noli[i].children[0].children[1].innerHTML = arr[i]
        noli[i].children[0].children[0].style.backgroundPosition = `${-i*24}px 0`
        noli[i].children[0].onmouseover = function () {
            noli[i].children[0].children[0].style.opacity = '0';
            noli[i].children[0].children[1].style.display= 'block'
        }
        noli[i].children[0].onmouseout = function () {
            noli[i].children[0].children[0].style.opacity = '1';
            noli[i].children[0].children[1].style.display= 'none'
        }
        noli[i].children[0].onclick = f1(i)
    }
// 控制滚动速度
    function f1(i) {
        return function (e) {
            e.preventDefault();

            let a = document.documentElement.scrollTop;
            let b = louceng[i].offsetTop-200;
            let s = b - a;
            let sudu = parseInt(s / 600 * 17);
            var timer =null
            timer= setInterval(function () {
                if (s > 0)
                {
                    a += sudu;
                    if (a > b) {
                        clearInterval(timer);
                    }
                }
                else  {
                    a += sudu;
                    if (a < b) {
                        clearInterval(timer);
                    }
                }
                document.documentElement.scrollTop = a
            },17)
        }
    }

    if (document.documentElement.scrollTop-200 > zqu.offsetTop) {
        dingwei.style.display= 'block'
    } else {
        dingwei.style.display= 'none'
    }

    for (let i = 0; i < louceng.length; i++) {
        if(louceng[i].offsetTop<document.documentElement.scrollTop +300)
        {
            for (let j = 0; j < louceng.length; j++)
            {
                noli[j].children[0].children[0].style.opacity = '1';
                 noli[j].children[0].children[1].style.display= 'none'
            }
            noli[i].children[0].children[0].style.opacity = '0';
            noli[i].children[0].children[1].style.display= 'block'
        }
}
    
// 监听 滚动事件
window.onscroll = function () {
        
    if (document.documentElement.scrollTop > zqu.offsetTop) {
        dingwei.style.display= 'block'
    } else {
        dingwei.style.display= 'none'
    }

    for (let i = 0; i < louceng.length; i++) {
        if(louceng[i].offsetTop<document.documentElement.scrollTop +300)
        {
            for (let j = 0; j < louceng.length; j++)
            {
                noli[j].children[0].children[0].style.opacity = '1';
                 noli[j].children[0].children[1].style.display= 'none'
            }
            noli[i].children[0].children[0].style.opacity = '0';
            noli[i].children[0].children[1].style.display= 'block'
        }
    }
    if (document.documentElement.scrollTop > 290) {
        gudingtop.style.display = 'block'
        guding.style.bottom = '60px'
        
    } else {
        gudingtop.style.display = 'none'
        guding.style.bottom = '20px'
    }
}